AULA08 - Framework de CSS: Bootstrap e Media Queries | Animação¶


Agenda¶

  • Apresentação
  • Apresentação Bootstrap
  • Template básico
  • Media Queries
  • Animação com CSS
  • Leitura de arquivos com robô
  • Imagens e emojis
  • Referências
  • Perguntas

1. Apresentação Frameworks CSS¶

1.1. Material Design¶

  • Para aprender sobre Material Design, consulte MaterializeCSS.com.

  • De acordo com [Materializecss.com], "Criado e projetado pelo Google, o Material Design é uma linguagem de design que combina os princípios clássicos do design bem-sucedido, além de inovação e tecnologia. O objetivo do Google é desenvolver um sistema de design que permita uma experiência unificada do usuário em todos os seus produtos em qualquer plataforma".

  • Para utilizar o Material Design, existem duas formas diferentes:
    • Selecionar qual versão deseja, dependendo da sua preferência e conhecimento. Para começar a usar o Materialize, tudo o que você precisa fazer é baixar Materialize ou Sass Source.
    • Ou ainda você pode usar o CDN.

1.2. Foundation6¶

  • Para aprender sobre Foundation, consulte Foundation6 e Tutoriais.

1.3. Semantic UI¶

  • Para aprender a utilizar o Semantic UI, consulte Semantic UI.com.

1.4. 960.gs¶

  • De acordo com [960.gs], "O 960 Grid System é um esforço para otimizar o fluxo de trabalho de desenvolvimento da web, fornecendo dimensões comumente usadas, com base em uma largura de 960 pixels. Existem duas variantes: 12 e 16 colunas, que podem ser usadas separadamente ou em conjunto".
  • Para aprender a utilizar o 960.gs, consulte 960.gs.

1.5. Tailwind CSS¶

  • É um framework de CSS de estrutura CSS de código aberto. Oferece classes com propósitos únicos.
  • Consulte FreeCodeCamp.
  • Consulte Tailwindcss.

2. Apresentação Bootstrap¶

  • De acordo com Wikipédia), o Bootstrap é um framework de CSS gratuito de códifo fonte aberto para o desenvolvimento de interface e front-end de sites, aplicações web por meio do uso da linguagem de formatação de hipertexto (HTML), da formatação CSS e da linguagem de programação Javascript.
  • É baseado em modelos de design para a topografia, melhorando a experiêmcia do usuário em um site amigável e responsivo.

2.1. Por que utilizá-lo?¶

  • Para Treinaweb, o framework de CSS segue os princípios de usabilidade de design e interfaces, assim como, possui um visual padronizado e atraente. Aborda componentes e plugins que poderão ser utilizados em projetos, agilizando a produtividade. Possui diversas APIs que podem ser personalizadas.

2.2 Quadro comparativo de vantagens e desvantagens¶

Treinaweb
Vantagens Desvantagens
Responsividade: possui um sistema de layout 100% responsivo, capaz de manter a página completamente responsiva em diferentes dispositivos e resoluções; Excesso de padronização: como a gama dos componentes pré-prontos é extensa e atende a praticamente todos os cenários no que diz respeito ao desenvolvimento de páginas web responsivas, as diferentes aplicações podem acabar ficando “com a mesma cara”. Porém, sua customização é bastante simples.

Extensa biblioteca de componentes: possui um conjunto de componentes extenso, como ícones, painéis etc.; Documentação: possui uma documentação bem completa e acessível;b
Reuso de código: Como o Bootstrap entrega uma gama muito grande de componentes pré-prontos, se torna muito mais fácil lidar com questões como reusabilidade de código. |


2.3. Para aprofundar em Bootstrap¶

  • Para aprender sobre Bootstrap, consulte a versão em português Getbootstrap.
  • A versão mais atual é a 5.3 (acesso em: 04 mar. 2023), lançada recentemente Getbootstrap.
  • Poderá baixar para utilizar, ou usar o CDN.
  • Poderá utilizar templates, alguns são pagos, outros são gratuitos.
    • Consulte Bootstrap themes, templates, and more to help you start your next project!.
    • Consulte Free Bootstrap Templates.

2.3.1. Para uso com CDN | versão 5.3¶

  • Acesse: Getbootstrap e copie de CDN via jsDelivr e cole nos respectivos locais do código:

  • Adicione no head abaixo da tag title e antes de seu link para o arquivo css:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  • Adicione no final do body:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>

2.3.2. Para uso local | versão 5.3¶

  • Acesse: Getbootstrap e efetue o download de Compiled CSS and JS. Copie e cole as subpastas css e js para o local onde ficarão os assets (pode ser um arquivo CSS, JavaScript, imagem, vídeo, etc. Os assets estão localizados em um diretório acessível pela Web e estão diretamente disponibilizados por servidores Web).

2.3.3. Template Básico¶

  • Bootstrap é o mais popular framework HTML, CSS, e JS para desenvolvimento de projetos responsivo e focado para dispositivos móveis na web.
  • Para começar a utilizar, acesse a página https://getbootstrap.com/docs/5.3/getting-started/introduction/.
  • Em seguida, ao lado direito, selecione QUICK START e crie um arquivo index.html no seu editor de texto preferido. Caso não queira utilizar o CDN, faça as devidas alterações, substituindo pelos links aos arquivos locais.
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>

    <!-- CDN via jsDelivr -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- CDN via jsDelivr -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
  </body>
</html>
  • Bootstrap define estilos globais básicos de exibição, tipografia, e link.
  • Bootstrap adota um sistema de grid. Pode escolher entre os dois tipos de "containers" para usar nos projetos. Lembre-se que isso cria um padding a mais, então não deve-se incluir nenhum "container" dentro de outro.
  • Utilize:
    • .container: para conteúdo responsivo com largura limitada.
    • .container-{breakpoint}: para largura de 100% para o breakpoint especificado.
    • .container-fluid: para conteúdo responsivo com largura fluída, isto é, toda a largura da janela.
    • Sistema de grid é usado para criação de layout de páginas pelo uso de linhas e colunas com conteúdo respectivamente.
  • Bootstrap funciona da seguinte forma:
    • As linhas (row) devem estar localizadas dentro de um .container (largura fixa) ou .container-fluid (largura cheia) para alinhamento e padding adequado.
    • Use linhas para criar grupos horizontais de colunas.
    • O conteúdo deve ser inserido dentro das colunas, e apenas colunas podem ser filhas imediatas de linhas.
  • Para maiores detalhes, consulte Containers.
<!-- Exemplo de uso de container padrão -->

<div class="container">
  <!-- Content here -->
</div>

<!-- Exemplos de containers responsivos -->

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>


<!-- Exemplo de container fluido -->

<div class="container-fluid">
  ...
</div>

2.4. Media Queries¶

  • Consulte o site para maiores detalhes e mais informações: Media Queries.
Fonte: https://getbootstrap.com/docs/5.3/layout/breakpoints/#media-queries
/***************/
/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { ... }


/***************/
/* Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint */

.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

/***************/
/* Example: Style from medium breakpoint and down (máximo) */

@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) { ... }

@include media-breakpoint-between(md, xl) { ... }
/* É o mesmo que: */
/* Apply styles starting from medium devices and up to extra large devices */
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Opções de GRID:

Fonte: https://getbootstrap.com/docs/5.3/layout/grid/
  • Para maiores detalhes, consulte o artigo em CSS-Tricks: Logic in Media Queries.

2.4.1. Criando seu próprio arquivo com media queries¶

  • Arquivo index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Media Queries</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> Teste de cores com Media Queries </h1>
  <div class="pvw-title"><span>Tamanho Mínimo</span></div>
</body>
</html>
  • Arquivo estilo.css
/* arquivo css*/  

@media (max-width: 768px) {  
    body {
    color: darkorchid;
    background-color: darkgrey;
  }
  .pvw-title span {
     display: none;
  }
  .pvw-title:after {
    font-weight: bold;
      content: 'Máximo: 768px.';
  }
}

/* Small devices (tablets, 768px and up) */

@media (min-width: 768px) {
  body {
    color: wheat;
    background-color: #0f0f0f;
  }
  .pvw-title span {
    display: none;
  }
  .pvw-title:after {
    font-weight: bold;
    content: 'Mínimo: 768px e Máximo: 992px.';
  }
}

/* Medium devices (desktops, 992px and up) */

@media (min-width: 992px) {
  body {
    color: darkred;
    background-color: lightpink;
  }
  .pvw-title span {
    display: none;
  }
  .pvw-title:after {
    font-weight: bold;
    content: 'Mínimo: 992px e Máximo: 1200px.';
  }
}

/* Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
  body {
    color: white;
    background-color: darkolivegreen;
  }
  .pvw-title span {
    display: none;
  }
  .pvw-title:after {
    font-weight: bold;
    content: 'Mínimo 1200px.';
  }
}

Saída:

Fonte: Autoria própria

2.5. Animação com CSS¶

  • De acordo com Mozilla Foundation, as animações CSS3 podem ocorrer a partir do momento em que usamos transições de um estilo.
  • As animações são compostas de dois itens:
    • um estilo descrevendo a animação e,
    • um set de keyframes que indicam o estado final e inicial do estilo CSS da animação, bem como possíveis pontos de quebra intermediários ao longo do caminho.
  • São três vantagens para animações CSS:

    • São de fácil utilização para animações simples;
    • Você pode criá-las sem mesmo ter que conhecer JavaScript.
    • Executam bem, mesmo sobre moderada carga do sistema.
  • Para criar uma sequência de animação CSS, utilizaremos a propriedade animation e outras, o que permitirá a configuração da sincronização da animação, a sequencia de como progredir.

  • Para definir a aparência da animação, utiliza-se a regra @keyframes. Veremos mais à frente.

2.5.1. Propriedade CSS animation¶

  • Valores iniciais para as propriedades de animation:

    • animation-name: none;
    • animation-duration: 0s;
    • animation-timing-function: ease;
    • animation-delay: 0s;
    • animation-iteration-count: 1;
    • animation-direction: normal;
    • animation-fill-mode: none;
    • animation-play-state: running;
  • Sintaxe:

/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ 
animation : 3s ease-in 1s 2 reverse both paused slidein ; 

/* @keyframes duration | timing-function | delay | name */
animation : 3s linear 1s slidein ;

/* @keyframes duration | name */
animation : 3s slidein ;

2.5.1.1. Significado das propriedades do animation¶

  • Para aprofundamento, consulte MDN Web Docs.
  • E leia o artigo do CSS-Tricks Animation.

  • animation-name: Especifica o nome da regra @keyframes < nomeRegra > descrevendo os keyframes da animação.

    • Importante: Você quem escolhe o nome.
  • animation-duration: Configura o tempo que uma animação deveria levar para complear um ciclo.
    • Valores permitidos: tempo em segundos ou milisegundos.
  • animation-timing-function: Configura a sincronização da animação; que é, como a animação transita por keyframes, por estabilizar curvas de aceleração.
    • Valores permitidos: ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end, etc.
  • animation-delay: Configura o delay entre o tempo em que o elemento é carregado e o inicio da sequência de animação.
    • Valores permitidos: tempo em segundos ou milisegundos.
  • animation-iteration-count: Configura o número de vezes que uma animação deveria se repetir; você pode especificar infinito para repetir a animação indefinidamente.
    • Valores permitidos: infinite, ou um número inteiro.
  • animation-direction: Configura se a animação deve ou não alternar a direção em cada execução durante a sequência ou voltar ao ponto inicial e se repetir.
    • Valores permitidos: normal, reverse, alternate, alternate-reverse, inherit, initial, unset.
  • animation-fill-mode: Configura que valores são aplicados pela animação antes e depois de se executar.
    • Valores permitidos: none, forwards, backwards, both, etc.
  • animation-play-state: Permite você pausar e resumir a sequência da animação.
    • Valores permitidos: running, paused, inherit, initial, unset.

2.5.1.2. Exemplo animation¶

  • Exemplo extraído de Blog Hubspot.
  • https://codepen.io/hubspot/embed/rNjgoey?height=300&theme-id=39533&default-tab=result&user=hubspot&slug-hash=rNjgoey&editable=true&pen-title=CSS%20Animation%20Example&name=cp_embed_1#css-box

Arquivo index.html¶

<!-- Arquivo index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="estilo.css" />
    <title>Static Template</title>
  </head>
  <body>
    <div></div>
  </body>
</html>

Arquivo estilo.css¶

/* Arquivo estilo.css */

div {
  /* animation properties */
  animation-name: my-animation;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

  /* other properties */
  width: 300px;
  height: 100px;
  border-radius: 10px;
  position: absolute;
  left: 0; 
  right: 0; 
  margin-left: auto;
  margin-right: auto; 

}

@keyframes my-animation {
  from {
    background-color: #ff7a59;
    width: 300px;
    top: 10px;
  }
  to {
    background-color: #33475b;
    width: 50px;
    top: 100px;
  }
}

2.5.2. Propriedade CSS transition¶

  • Leio o artigo do CSS-Tricks Transition.
  • transition: permite definir a transição entre dois estados de um elemento.
  • Estados diferentes podem ser definidos usando pseudo-classes tais como :hover ou :active; ou dinamicamente, usando javascript.
  • Valores iniciais para a propriedade de transition:

    • transition-delay: 0s;
    • transition-duration: 0s;
    • transition-property: all;
    • transition-timing-function: ease;
  • Sintaxe:

/* property name | duration */ 
transition: margin-left 4s;

/* property name | duration | delay / */ 
transition: margin-left 4s 1s;

/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-left 4s, color 1s; 

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */ 
transition : inherit; 
transition : initial;
transition : unset;

2.5.2.1. Significado das propriedades do transition¶

  • transition-delay: Configura o delay entre o tempo em que o elemento é carregado e o inicio da sequência de animação.
    • Valores permitidos: tempo em segundos ou milisegundos.
  • transition-duration: Configura o tempo que uma animação deveria levar para complear um ciclo.
    • Valores permitidos: tempo em segundos ou milisegundos.
  • transition-property: É usada para especificar os nomes das propriedades CSS às quais um efeito de transição deve ser aplicado.
    • Valores permitidos: none, all.
  • transition-timing-function: Permite que você estabeleça uma curva de aceleração, de modo que a velocidade da transição pode variar ao longo de sua duração.
    • Valores permitidos: ease, ease-in, ease-ot, ease-in-out, linear, step-start, step-end.

2.5.2.2. Exemplo transition¶

  • Exemplo extraído de Josh.

Arquivo index.html¶

<!-- Arquivo index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="estilo.css" />
    <title>Static Template</title>
  </head>
  <body>
    <button class="btn">
      Hello World
    </button>
  </body>
</html>

Arquivo estilo.css¶

/* Arquivo estilo.css */

.btn {
    will-change: transform;
    transition: transform 450ms;
  }

  .btn:hover {
    transition: transform 125ms;
    transform: translateY(-10px);
  }

.btn {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: none;
  background: slateblue;
  color: white;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

2.6. Definindo sequência de animação com Keyframes¶

  • Leia o artigo da CSS-Tricks Keyframe Animation Syntax.
  • Leia sobre animações no Blog.
  • Para aprofundamento, consulte MDN Web Docs.
  • E também, o artigo da CSS-Tricks Transition.

Observação:¶

  • O @keyframes permite que os autores controlem os passos intermediários em uma seqüência de animação CSS, estabelecendo pontos chave ao longo da seqüência de animação que deve ser alcançada por certos pontos durante a animação.
  • Isso lhe dá um controle mais específico sobre os passos intermediários da seqüência de animação do que você obteria ao deixar o navegador lidar com tudo automaticamente.

2.6.1 Efeitos de Transição transform¶

  • Aparecimento gradual (fade in)
  • Trocar de cor (change color)
  • Arredondar (border-radius)
  • Sombras 3D (box-shadow)
  • Swing (Mover o retângulo) utilizando animation.
  • Inserir borda (box-shadow)
  • Skew: modificará os ângulos dos elementos.

Valores da propriedade Transform:¶

  • Crescer (scale): O valor scale modificará a dimensão do elemento. Ele aumentará proporcionalmente o tamanho do elemento levando em consideração o tamanho original do elemento.
  • Encolher (scale): O valor scale modificará a dimensão do elemento. Ele diminuirá proporcionalmente o tamanho do elemento levando em consideração o tamanho original do elemento.
  • Rotacionar (rotate): O rotate rotaciona o elemento levando em consideração seu ângulo, especial- mente quando o ângulo é personalisado com o transform-origin.
  • Translação (translate): O translation moverá o elemento no eixo X e Y. O interessante é que você não precisa se preocupar com floats, positions, margins e etc. Se você aplica o translation, ele moverá o objeto e pronto.

2.6.1.1. Exemplo transform¶

  • Exemplo extraído de Blog Hubspot.
  • https://codepen.io/argyleink/embed/poEjvpd?height=265&theme-id=dark&default-tab=css%2Cresult&user=argyleink&slug-hash=poEjvpd&pen-title=CSS%20mouse-out%20transition%20effect&name=cp_embed_2#css-box

Arquivo index.html¶

<!-- Arquivo index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="estilo.css" />
    <title>Static Template</title>
  </head>
  <body>
      <h1>Hover Me</h1>
  </body>
</html>

Arquivo estilo.css¶

/* Arquivo estilo.css */

h1::before {  
  transform: scaleX(0);
  transform-origin: bottom right;
}

h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

h1::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: hsl(200 100% 80%);
  z-index: -1;
  transition: transform .3s ease;
}

h1 {
  position: relative;
  font-size: 5rem;
}

html {
  block-size: 100%;
  inline-size: 100%;
}

body {
  min-block-size: 100%;
  min-inline-size: 100%;
  margin: 0;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  font-family: system-ui, sans-serif;
}

@media (orientation: landscape) {
  body {
    grid-auto-flow: column;
  }
}

2.6.2. Outros exemplos transform¶

EXEMPLO1¶

Arquivo index.html¶

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="estilo.css" />
    <title>Static Template</title>
  </head>
  <body>
    <div>
      <h2 id="animation">CSS3: Animação e Transições</h2>
    </div>
    <div>
      <div class="box slideright">Slider box</div>
      <div class="box rotate">Rotate box</div>
      <div class="box rounding">Round box</div>
      <div class="box scale">Scaling box</div>
      <div class="box color">Color box</div>
      <div class="box skew">skew box</div>
    </div>
  </body>
</html>

Arquivo estilo.css¶

/* estilo.css */  

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

h2 {
  padding: 10px;
  border-radius: 50%;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

.box {
  float: left;
  margin: 20px;
  width: 100px;
  height: 60px;
  border: 2px solid white;
  box-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  border-radius: 5px;
  line-height: 60px;
  text-align: center;
  transition: all 1s ease-in-out;
}

.slideright:hover {
  transform: translate(3em, 0);
}

.rotate:hover {
  transform: rotate(45deg);
}

.rounding:hover {
  border-radius: 100px;
}

.scale:hover {
  transform: scale(2);
}

.color:hover {
  background: darkblue;
  color: white;
}

.skew:hover {
  transform: scale(1) skewX(10deg) skewY(10deg);
  transform: scale(1) skewX(10deg) skewY(10deg);
  transform-origin: 0% 0%;
}

Saída:

  • Passe o mouse sobre cada um dos boxes para ativar o efeito.
Fonte: Autoria própria

EXEMPLO2¶

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Animações com keyframes</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
    <section>
        <h1>Exemplo animação - efeito girar</h1>
        <div class="giragira"></div>
    </section>
    <section>
        <h1>Exemplo animação - efeito subir e descer</h1>
        <div class="vaivolta"></div>
    </section>
    <section>
        <h1>Exemplo animação - efeito pendulo</h1>
        <div class="pendulo"></div>
    </section>
</body>
</html>
body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
section {
  margin: 10px auto;
  padding: 2em;
  border-radius: 0.8em;
  width: 80%;
  height: 300px;
}

h1 {
  padding: 10px;
  border-radius: 50%;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

@keyframes rodaroda {
  0% {
    transform: rotate(0deg);
  }
  50% {
    background-color: red;
    transform: rotate(180deg);
    border-radius: 2em;
  }
  100% {
    background-color: blue;
    transform: rotate(360deg);
    border-radius: 50%;
  }
}

@keyframes vaivolta {
  0% {
    top: 520px;
  }
  50% {
    top: 560px;
  }
  100% {
    top: 580px;
    border-radius: 40px;
    background-color: yellow;
  }
}

@keyframes pendulo {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(95deg);
  }
}

.giragira {
  width: 150px;
  height: 150px;
  margin: 10px auto 45px;
  background-color: black;

  animation: rodaroda 0.2s linear infinite;
}

.vaivolta {
  width: 150px;
  height: 150px;
  margin: 10px auto 0;
  background-color: blue;
  position: absolute;
  left: 50%;
  animation: vaivolta 1s alternate linear infinite;
}

.pendulo {
  width: 150px;
  height: 150px;
  margin: 35px auto 0;
  background-color: green;
  animation: pendulo 1s alternate linear infinite;
}
Fonte: Autoria própria

2.7. Leitura de conteúdos com robôs¶

  • Leitura de conteúdo por máquinas?
  • Existem 3 formas de permitir a leitura de um conteúdo incorporado em um documento Web:

    • HTML+RDFa: HTML+RDFa.
    • Microformats: Microformats.
    • Microdata: Adicionando microdados às páginas da Web ajuda a motores de busca a entenderem melhor o conteúdo das páginas, seus temas, etc.
  • Microdatas:

    • Objetivo: o principal objetivo do microdados é Search Engine Optimization (SEO). Esta informação não é visível para os seres humanos: é informação semântica pura.
    • Tipos populares de microdados são eventos, perfil de uma pessoa, a descrição de uma organização, os detalhes de uma receita, uma descrição do produto, a localização geográfica, etc.
    • Analisando o itemprop="url".
    • Diferentes usos:

      • O navegador, ou uma extensão do navegador, pode interpretar o último exemplo de um endereço e pode propor para enviá-lo a um aplicativo de mapa.
      • Um rastreador da Web pode interpretar isso como um endereço e exibi-lo em suas respostas usando um layout de apresentação dedicada.
      • Algum código JavaScript na página pode acessar esses dados.
      • Com outros tipos de microdados, para eventos, por exemplo, o navegador pode aparecer uma aplicação de calendário, etc.
      • Nota: Para usuários avançados, Microdados é muito semelhante ao microformatos, que usam classes de HTML ou para RDFa –> RDFa, que não valida em HTML4 ou HTML5. Porque RDFa foi considerada muito difícil para os autores a escrever (Google realizou uma pesquisa que descobre que autores fazem 30% mais erros com RDFa do que com outros formatos), microdados é a resposta de HTML5 para a necessidade de incorporar semântica em documentos HTML.
      • Links Interessantes microdatas:
        • HTML5 Microdata and Schema.org: Microdata e Schema.
        • Referência de vocabulários mais comuns com Microdatas: Vocabulários comuns.
        • Capítulo 10. Diving in Microdata: Capítulo 10. Diving in Microdata.
        • Ferramenta de Teste microdata: Ferramenta de teste.
        • Página a testar o Javascript: JSbin.
        • Ferramenta de visualização de Microdata: .
        • Página a testar: JSbin.
        • Geradores de microdata:
      • Schema Structured Data: Schema.
      • Microdata Generator using Schema.org Vocabulary: Microdata Generator.
      • HTML5 Microdata Format Generator: Generator.

2.7.1. Exemplo (cópia do site https://www.w3resource.com/schema.org/introduction.php)¶

  • Para maiores detalhes consulte Schema.org Tutorial
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset=utf-8>
    <title>example code using Microdata</title>
</head>
<body>
    <section itemscope itemtype="http://schema.org/Book">
        <h1 itemprop="name">The Jungle Book</h1>
        <span>Author: <span itemprop="author">Rudyard Kipling</span></span>
        <span>Category : <span itemprop="genre">children's literature</span></span>
        <a href="http://en.wikipedia.org/wiki/The_Jungle_Book"><span itemprop="detail">Detail info</span></a>
    </section>
</body>
</html>

2.8. Imagens - Manipulando de forma responsiva¶

  • Para aprofundamento, consulte o artigo A Guide to the Responsive Images Syntax in HTML.
  • Mais sobre Imagens.

  • Para conhecimento, leia o artigo na CSS-Tricks: Um guia para a sintaxe de imagens responsivas em HTML.

2.8.1. Utilizando Emojis¶

  • Para utilizar em seu texto HTML, utilize os emojis da seguinte forma:
  • Remova U+.
  • Inserir ao final ;.

Observação: Lembre-se da tag meta charset="utf-8" no head do html.¶

  • Para escolher seu Emoji, consulte Full Emoji List, v13.0.

  • Exemplo:

    • U+1F64C
    • U+1F932
    • U+1F9DB
    • U+1F9DD
    • U+1F9DE
    • U+1F487
  • Removendo U+ e adicionando ; ao final.
<p>&#x1F64C;  &#x1F932; &#x1F9DB; &#x1F9DD; &#x1F9DE; &#x1F487;</p>

Saída:

Para se divertir um pouco com códigos, consulte e leia os artigos:¶

  • Cube 3D Transformations.
  • Cube 3D.

Referências¶

  • Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.

Perguntas¶

  • Esclareça suas eventuais dúvidas durante as aulas.
  • Ou pelo E-mail: paulagiancoli@ifsp.edu.br.
  • Ou pelo Fórum do componente curricular.

ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2021.

</div> </div>